<template>
    <el-table class="mt20" :data="tableData" style="width: 100%">
        <!-- <el-table-column label="审批部门" show-overflow-tooltip>
            <template #default="scope">
                <el-text v-if="scope.row.role">{{scope.row.role.name}}</el-text>
            </template>
        </el-table-column> -->
        <el-table-column label="审批人" show-overflow-tooltip>
            <template #default="scope">
                <el-text v-if="scope.row.user">{{scope.row.user.name}}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="status_text" label="审批状态" />
        <el-table-column prop="comment" label="审批意见"/>
        <el-table-column prop="updated_at" label="审批时间"/>
    </el-table>

</template>
  
<script lang="ts" setup>
import { ref,watch } from 'vue'
import http from '../util/request';
const id = ref<number>(0)
interface RuleForm {
    id: 0,
    reviewer_id:0,
    application_id:0,
    status: '',
    comment:'/',
} 
const tableData = ref<RuleForm>()

const onGetData = () => {
    http.post('/approve/records',{id:id.value}).then((response:any)=>{
        tableData.value = response.data.data
    })
}

const props = defineProps<{
    id:number
}>()

watch(props,()=>{
    id.value = props.id
    onGetData()
},{ immediate: true })

</script>
<style scoped>
</style>
